<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <style>
        .chart-container {
            position: relative;
            margin: auto;
            height: 40vh;
            width: 40vw;
        }
    </style>
</head>

<body class="gray-bg">
<div class="row border-bottom white-bg dashboard-header">

    <div id="notfinished" style="width: 600px;height:400px;float:left"></div>
    <div id="systemCount" style="width: 600px;height:400px;float:left"></div>

</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/echarts.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script type="text/javascript">
    var notFinishedProcessSum = eval([[${notFinishedProcessSum}]]);
    var finishedProcessSum = eval([[${finishedProcessSum}]]);
    var processSum = eval([[${processSum}]]);
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('notfinished'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '总工单数：' + processSum,
            left: 'center',
            top: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: finishedProcessSum,
                        name: '已完成'
                    },
                    {
                        value: notFinishedProcessSum,
                        name: '未完成'
                    }
                ],
                radius: ['40%', '70%']
            }
        ],
        avoidLabelOverlap: true,
        label: { //显示数值的地方
            normal: {
                position: 'top',
                color: '#000000',
                show: true,
                formatter: function (params) {
                    return params.value[2];
                }
            }
        },
        labelLine: {
            show: true
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
            }
        },
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script type="text/javascript">
    var guanwu = [[${systemCountMap.get('关务系统') > 0 ? systemCountMap.get('关务系统') : 0}]];
    var wms = [[${systemCountMap.get('WMS系统') > 0 ? systemCountMap.get('WMS系统') : 0}]];
    var master_data_manager = [[${systemCountMap.get('主数据管理系统') > 0 ? systemCountMap.get('主数据管理系统') : 0}]];
    var gyl_service = [[${systemCountMap.get('供应链服务系统') > 0 ? systemCountMap.get('供应链服务系统') : 0}]];
    var settlement = [[${systemCountMap.get('结算系统') > 0 ? systemCountMap.get('结算系统') : 0}]];
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('systemCount'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '系统出错总数：' + (guanwu + wms + master_data_manager + gyl_service + settlement),
            left: 'center',
            top: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '2%',
            left: 'center'
        },
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: guanwu,
                        name: '关务系统'
                    },
                    {
                        value: wms,
                        name: 'WMS系统'
                    },
                    {
                        value: master_data_manager,
                        name: '主数据管理系统'
                    },
                    {
                        value: gyl_service,
                        name: '供应链服务系统'
                    },
                    {
                        value: settlement,
                        name: '结算系统'
                    },
                ],
                radius: ['40%', '70%']
            }
        ],
        avoidLabelOverlap: true,
        label: { //显示数值的地方
            normal: {
                position: 'top',
                color: '#000000',
                show: true,
                formatter: function (params) {
                    return params.value[2];
                }
            }
        },
        labelLine: {
            show: true
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
            }
        },
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

